<template>
  <!-- <div>商品列表</div> -->
  <div>
    <!-- 商品管理介绍 -->
    <el-collapse class="collapse">
      <el-collapse-item title="商品管理介绍">
        <div>
          商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="app-container">
        <el-collapse class="collapse">
            <el-collapse-item title="条件查询">
                <div>
                     <el-row>
                        <el-form :inline="true" :model="markets" class="demo-form-inline">
                            <el-col :span="8">
                            <el-form-item label="商品名称">
                                <el-input  placeholder="商品名称/模糊查询" v-model="markets.name" ></el-input>
                            </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品货号">
                                <el-input  placeholder="商品货号" v-model="markets.productSn"></el-input>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                 <el-form-item label="品牌">
                                    <el-select  placeholder="品牌" v-model="markets.brandId">
                                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                             <el-col :span="8">
                                 <el-form-item label="上架状态">
                                    <el-select  placeholder="上架状态" v-model="markets.publishStatus">
                                        <el-option label="上架" value="1"></el-option>
                                        <el-option label="未上架" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                 <el-form-item label="审核状态">
                                    <el-select  placeholder="审核状态" v-model="markets.verifyStatus">
                                        <el-option label="审核" value="1"></el-option>
                                        <el-option label="未审核" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item class="btn">
                                    <el-button size="mini" @click="reset">重置</el-button>
                                    <el-button size="mini" type="primary" @click="search">搜索</el-button>          
                                </el-form-item>
                            </el-col>
                        </el-form>
                        </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>
          <!-- 商品列表 -->
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button class="btn" size="mini" @click="handleClick" type="primary">新增</el-button>
                <el-button class="btn" size="mini" type="primary">导出商品列表excel文件</el-button>
            </div>
            <div>
                <el-table v-loading="loading" :data="productsList" border style="width: 100%">
                    <el-table-column fixed   type="index" width="50" label="序号"></el-table-column>
                    <el-table-column  width="150" label="商品图片">
                        <template slot-scope="scope">
                            <img style="width:100%;height:auto" :src="scope.row.pic" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column  width="250" label="商品名称">
                        <template slot-scope="scope">
                            <div>{{scope.row.name}}</div>
                            <div>品牌:{{scope.row.brandName}}</div>
                            <div>{{scope.row.description}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150" label="商品价格">
                        <template slot-scope="scope">
                            <div>原价:{{scope.row.originalPrice}}</div>
                            <div>现价:{{scope.row.price}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150" label="商品类别">
                        <template slot-scope="scope">
                            <div>{{scope.row.productCategoryName}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150" label="标签">
                        <template slot-scope="scope">
                            <el-switch inactive-text="最新:" @change="newStatu(scope.row)" v-model="scope.row.newStatus" :active-value="1" :inactive-value="0"></el-switch>
                            <el-switch inactive-text="推荐" @change="recommendStatu(scope.row)" v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150" label="标签2">
                        <template slot-scope="scope">
                            <el-switch inactive-text="发布:" @change="publishStatu(scope.row)" v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0"></el-switch>
                            <el-switch inactive-text="审核:" @change="verifyStatu(scope.row)" v-model="scope.row.verifyStatus " :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column  width="150" label="sku">
                        <el-button @click="skuclick" type="text" size="small">编辑sku</el-button>
                    </el-table-column>
                    <el-table-column prop="weight"  width="50" label="重量"></el-table-column>
                    <el-table-column prop="sort"  width="50" label="排序"></el-table-column>
                    <el-table-column  fixed="right"  label="操作"  width="150">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)"  type="text" size="small">编辑</el-button>
                            <el-button type="text" style="color:red" @click="removepro(scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                        <!-- 这是分页 -->
                <div>
                    <el-pagination 
                    :current-page="page.start"
                    :page-sizes="page.pageSizes"
                    :page-size="page.limit" 
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    @size-change="handleSizeChange"  
                    @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
                      
        </el-card>           
    </div>
    </div>
  
  </div>
</template>
<script>
import list from "@/api/product/list";
import brand from "@/api/product/brand";
export default {
  data() {
    return {
        // 查询列表数据
        markets:{
            name:'',
            productSn:'',
            brandId:'',
            publishStatus:'',
            verifyStatus:'',
        },
          //页码
      page:{
          //开始页
        start: 1,
        //最多几行
        limit: 5,
        //总页数
        total: 0,
        pageSizes:[5, 10, 20, 30],
      },
      loading:false,
      //商品列表数据
      productsList:[],
      //品牌列表
        brandList:[],
    };
  },
  methods:{
      //查询商品列表
      init(){
          this.loading=true
          list.productsByPage(this.page.start,this.page.limit,this.markets).then(res=>{
            // console.log(res)
            this.loading=false;
              if(res.success){
                  this.page.total=res.data.total;
                  this.productsList=res.data.rows;
              }else{
                  this.$message.error("请求查询列表失败")
              }
          })      
      },
      brands(){
          //品牌列表
          brand.findAllBrand().then(res=>{
            //   console.log(res);
              if(res.success){
                  this.brandList=res.data.items;
                //   console.log(this.brandList)
              }else{
                  this.$message.error("请求品牌列表数据失败")
              }
          })
      },
      //最新
      newStatu(e){
        //   console.log(e)
          var NewStatuss=e.newStatus==0?1:0;
          list.switchNewStatus({
                productId: e.id,
                status: e.newStatus
          }).then(res=>{
              console.log(res);
              if(res.success){
                  this.$message.success("修改状态成功");
                  this.init();
              }else{
                  this.$message.error("修改状态失败");
                  e.newStatus=NewStatuss;
              }
          })
      },
      //推荐
    recommendStatu(e){
        console.log(e)
         var recommend=e.recommendStatus==0?1:0;
          list.switchRecommandStatus({
                productId: e.id,
                status: e.recommendStatus
          }).then(res=>{
              console.log(res);
              if(res.success){
                  this.$message.success("修改状态成功");
                  this.init();
              }else{
                  this.$message.error("修改状态失败");
                  e.recommendStatus=recommend;
              }
          })
    },
    //发布
    publishStatu(e){
         var publish=e.publishStatus==0?1:0;
          list.switchPublishStatus({
                productId: e.id,
                status: e.publishStatus
          }).then(res=>{
              console.log(res);
              if(res.success){
                  this.$message.success("修改状态成功");
                  this.init();
              }else{
                  this.$message.error("修改状态失败");
                  e.publishStatus=publish;
              }
          })
    },
    //审核
    verifyStatu(e){
         var verify=e.verifyStatus==0?1:0;
          list.switchVerifyStatus({
                productId: e.id,
                status: e.verifyStatus
          }).then(res=>{
              console.log(res);
              if(res.success){
                  this.$message.success("修改状态成功");
                  this.init();
              }else{
                  this.$message.error("修改状态失败");
                  e.verifyStatus=verify;
              }
          })
    },
      //重置
      reset(){
          this.markets.name='';
          this.markets.productSn='';
          this.markets.brandId='';
          this.markets.publishStatus='';
          this.markets.verifyStatus='';
          this.brands();
          this.init();
      },
      //搜索
      search(){
        this.page.start=1;
        // console.log(this.markets)
        this.init()
      },
      //编辑sku
      skuclick(){

      },
      //编辑
      handleClick(e){
        
            this.$router.push({name:"ProductDetail",params:{id:e.id}})
         
          
      },
      //删除
      removepro(e){
        //   console.log(e)
           this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            list.del(e.id).then(res=>{
            //   console.log(res)
              if(res.success){
                  this.$message.success("删除成功");
                  this.init();
              }else{
                  this.$message.error("删除失败")
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          
      },
      //每页条数pageSize 改变时会触发
    handleSizeChange(val){
      this.page.limit=val;
      this.init()
    },
    //当前页currentPage 改变时会触发
    handleCurrentChange(val){
      this.page.start=val;
      this.init()
    },
  },
  created(){
      this.init();
      this.brands();
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/myScss";
.collapse{
    margin: 30px;
    padding:20px;
    background-color: #fff;
}
.clearfix{
   .btn{
       float: left;
       margin-right: 20px;
   }
}
</style>